import Vue from 'vue'
import VueRouter from 'vue-router'

// 重写push 和 replace
// 获取原来的push和replace方法
const originPush = VueRouter.prototype.push
const originReplace = VueRouter.prototype.replace


VueRouter.prototype.push = function (location, resolve, reject) {
    console.log('push')
    // resolve 和 reject 用户是否传了，如果传了，就用用户传的，如果没传，给一个空函默认值
    if (resolve && reject) {
        originPush.call(this, location, resolve, reject)
    } else {
        originPush.call(this, location, () => { }, () => { })
    }
}

VueRouter.prototype.replace = function (location, resolve, reject) {

    // resolve 和 reject 用户是否传了，如果传了，就用用户传的，如果没传，给一个空函默认值
    if (resolve && reject) {
        originReplace.call(this, location, resolve, reject)
    } else {
        originReplace.call(this, location, () => { }, () => { })
    }
}

// import Home from '../pages/Home'
// import About from '../pages/About'
// import PageNotFound from '../pages/PageNotFound'
// import News from '../pages/News'
// import Message from '../pages/Message'
// import Detail from '../pages/Detail'
// 懒加载 方式一： import 实现
// 方式二： resolve
// const Home = ()=>import('../pages/Home')
// const About = ()=>import('../pages/About')
// const PageNotFound = ()=>import('../pages/PageNotFound')
// const News = ()=>import('../pages/News')
// const Message = ()=>import('../pages/Message')
// const Detail = ()=>import('../pages/Detail')

const Home = (resolve) => require(['../pages/Home'], resolve)
const About = (resolve) => require(['../pages/About'], resolve)
const PageNotFound = (resolve) => require(['../pages/PageNotFound'], resolve)
const News = (resolve) => require(['../pages/News'], resolve)
const Message = (resolve) => require(['../pages/Message'], resolve)
const Detail = (resolve) => require(['../pages/Detail'], resolve)

Vue.use(VueRouter)

const router = new VueRouter({
    // 配置路由模式： 默认是hash模式
    mode: 'history', //  使用h5模式
    // 配置路由表
    routes: [
        {
            name: 'zhuye',
            path: '/home',
            component: Home,
            // authorization 权限
            meta: {
                isAuth: false,
                title: '首页'
            },
            // 子路由配置
            children: [
                {
                    name: 'xinwen',
                    path: '/home/news',
                    component: News,
                    meta: {
                        isAuth: true,
                        title: '新闻'
                    },
                    // 独享路由守卫
                    beforeEnter: ((to, from, next) => {
                        if (to.meta.isAuth) {// 需要权限验证
                            // 判断token 证明是合法用户，如果没有token没权限
                            if (localStorage.getItem('token')) {
                                next()
                            } else {
                                alert('没有权限访问')
                            }
                        } else {// 不需要权限验证
                            next()
                        }
                    })
                },
                {
                    // 子路由路径可以简写，注意前面没有 /
                    name: 'xiaoxi',
                    path: 'message',
                    component: Message,
                    meta: {
                        isAuth: true,
                        title: '消息'
                    },
                    children: [
                        {
                            name: 'xiangqing',
                            // params参数占位
                            path: 'detail/:id/:title?',
                            // 1. query参数 无需占位
                            // path:'detail',
                            component: Detail,
                            meta: {
                                isAuth: true,
                                title: '详情'
                            },
                            // 1. 对象: 可以直接传递给 路由组件的props，但是数据是死的
                            // props:{xx:100, yy:200}
                            // 2. boolean
                            //    2-1. true： 将params参数，变为路由组件的props参数接收。query不行
                            //    2-2. false  不做转化
                            // props:false
                            // 3. props: 回调函数
                            //    3-1. 调用时机：当前路由被激活的时候调用
                            //    3-2. 参数：当前路由对象 $route
                            //    3-3. 返回值  对象中的所有属性，都可以称为 props接收的数据
                            //    3-4. this指向 undefined
                            props: (route) => {
                                console.log('route11111: ', route)
                                return { ...route.query, ...route.params }

                            }
                        }
                    ]
                },
                {
                    path: '/home',
                    redirect: '/home/news'
                }
            ]
        },
        {
            name: 'guanyu',
            path: '/about',
            component: About,
            meta: {
                isAuth: false,
                title: '关于'
            }
        },
        {
            path: '/',
            // 路由重定向 配置默认页
            redirect: '/home'
        },
        {
            // 配置404页面
            path: '*',
            component: PageNotFound
        }
    ]
})

// 全局前置路由守卫
/**
 * 执行时机：进入路由前执行。所以，再次进行权限判断，通过就next放行，不通过可以给提示信息
 * 判断依据？to 要访问的路由，当前用户是否有权限访问
 * 路由权限信息，一般在路由的元数据 meta 进行设置
 * 
 * to: 要去哪个路由
 * from: 从哪个路由来的
 * next: 放行
 */
router.beforeEach((to, from, next) => {
    // console.log('to: ', to)
    // console.log('from:', from)
    // console.log('next: ', next)
    // 
    // if (to.meta.isAuth) {// 需要权限验证
    //     // 判断token 证明是合法用户，如果没有token没权限
    //     if (localStorage.getItem('token')) {
    //         next()
    //     } else {
    //         alert('没有权限访问')
    //     }
    // } else {// 不需要权限验证
    //     next()
    // }
    next()
})

/**
 * 全局后置路由守卫
 */
router.afterEach((to, from) => {
    document.title = to.meta.title
})

export default router